<template>
  <template v-if="active===0">
    <div>
      <el-tag
          closable
          type="success"
          @close="closeTag"
      >
        团支书基本信息
      </el-tag>
    </div><el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
    <el-table-column label="学生基本信息">{{tsId}}
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column prop="name" label="姓名"    >
      </el-table-column>
      <el-table-column prop="gender" label="性别"  >
      </el-table-column>
      <el-table-column prop="class" label="班级"   >
      </el-table-column>
      <el-table-column prop="account" label="学号" >
      </el-table-column>
      <el-table-column prop="credit" label="学分"  >
      </el-table-column>
      <el-table-column
          align="center">
<!--        <template #header>-->
<!--          <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd,drawer = true"-->
<!--                     circle></el-button>-->
<!--          <el-button type="primary" size="mini" icon="el-icon-search" @click="searchbox" circle></el-button>-->
<!--          &lt;!&ndash; 首先将要过渡的元素用transition包裹，并设置过渡的name &ndash;&gt;-->
<!--          <transition name="mybox">-->
<!--            <el-input-->
<!--                class="sear"-->
<!--                v-model="search"-->
<!--                size="mini"-->
<!--                v-show="searchshow"-->
<!--                placeholder="输入关键字搜索"/>-->
<!--          </transition>-->
<!--        </template>-->
        <template #default="scope">
          <el-button
              size="mini"
              @click="handleView(scope.$index, scope.row);active=1">查看</el-button>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table></template>
  <template v-if="active===1"><student-pass-credit-information v-bind:scId="scId" @fatherMethod="fatherMethod" @change="costPlannedAmountChange($event)"/></template>
</template>
<script lang="ts">
import {getCurrentInstance, reactive, ref, unref} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";
import {getLocalStudentOfThePS} from "@/network/admin/getLocalStudentOfThePS";
import {getLocalStudentAgreeAllApply} from "@/network/manager/getLocalStudentAgreeAllApply";
import StudentPassCreditInformation
  from "@/views/admin/childComps/StudentCreditDetails/StudentPassCreditInformation.vue";
export default {
  name:'CreditDetailsOfAffiliatedStudents',
  props:['tsId'],
  data(){
    return{
      direction: 'rtl',
      tableData: [{
        name:'测试',
        id:'2021'
      }],
      search: '',
      active:0,
      scId:''


    }
  },
  components:{
    StudentPassCreditInformation
  },
  setup(props){
    const ruleFormsss = ref(null);
    const {proxy}:any = getCurrentInstance();
    // const router=useRouter();
    // 定义变量

    const stateStudent = reactive({
      index: '',
      id: ''
    })

    console.log("团支书页面点击查看传给下属学生列表的id"+proxy.tsId)
    const Manager_id=proxy.tsId

    //获取团支书所属学生列表
    getLocalStudentOfThePS(Manager_id).then((result) => {
      //前后端连接成功
      console.log("前后端连接成功")
      const msg = result.data.msg;
      //打印返回结果状态，
      if (result.data.status == 1) {
        ElMessage.error(msg);
      } else {
        //打印后端获取的用户列表数据
        console.log(result.data.result)
        proxy.tableData = result.data.result
        console.log(proxy.tableData)
        // console.log(msg)
        // ElMessage.success({
        //   message:msg,type:'success'});

      }
    }).catch(() => {

      console.log("获取列表失败")
      const msg = "获取列表失败！请稍后尝试！";
      ElMessage.error(msg);
    })

    const searchbox = () => {
      proxy.searchshow = !proxy.searchshow
    }


    //查看学生信息
    function handleView(index, row) {
      console.log(index, row)
      console.log("学生ID："+row.id)//获取id
      proxy.scId=row.id
    }
    function fatherMethod(){
      closeTag()
    }

    function closeTag(){
      const change=0
      proxy.$emit('change',change)
      //proxy.$router.back();
    }
    function costPlannedAmountChange(value){
      console.log(value)
      proxy.active=0
    }

    return{
      searchbox,
      stateStudent,
      handleView,
      props,
      closeTag,
      fatherMethod,
      costPlannedAmountChange
    }
  }
}
</script>
